<script>

import * as echarts from 'echarts';
// import $ from 'jquery'
export default {
  name: 'VisualizationThree',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get('/api/vis/data3', {}).then(res => {
        if (res.data.code === 20041) {
          let data = [];
          for (let i = 0; i < res.data.data.length; i++) {
            data.push(
                {
                  value: res.data.data[i].param2,
                  name: res.data.data[i].param1,
                  progress: (res.data.data[i].param2 / 15090 * 100).toFixed(2)
                },
            );
          }
          this.init(data)
        }
      }).catch(error => {
        this.open4(error);
      })
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    init(echartData) {
      var chartDom = document.getElementById('main3');
      var myChart = echarts.init(chartDom);
      var option;
      var color = [
        [
          { offset: 0, color: '#FF8B55' },
          { offset: 1, color: '#FF8B55' },
        ],
        [
          { offset: 0, color: '#6DBEFF' },
          { offset: 1, color: '#6DBEFF' },
        ],
        [
          { offset: 0, color: '#28F2E7' },
          { offset: 1, color: '#28F2E7' },
        ],
      ];
      echartData.forEach((item, index) => {
        item.itemStyle = {
          color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              color[index],
          ),
        };
      });

      option = {
        title: [
          {
            text: '客服类型占比'
          }
        ],
        color,
        backgroundColor: '#FFF',
        series: [
          {
            type: 'pie',
            minAngle: 5,
            startAngle: 10, //起始角度
            labelLine: {
              show: true,
              length: 20,
              length2: 10,
              lineStyle: {
                width: 2
              }
            },
            label: {
              formatter: (params) => {
                const name = params.name
                return `{f${params.dataIndex + 1}|${params.data.progress}%}\n{t|${name + ' ' + params.value}}`
              },
              rich: {
                t: {
                  color: '#000',
                  lineHeight: 20,
                  fontSize: 20,
                  align: 'left'
                },
                f1: {
                  color: '#FF8B55',
                  fontSize: 20,
                  align: 'center',
                  lineHeight: 28
                },
                f2: {
                  color: '#6DBEFF',
                  fontSize: 20,
                  align: 'center',
                  lineHeight: 28
                },
                f3: {
                  color: '#28F2E7',
                  fontSize: 20,
                  align: 'center',
                  lineHeight: 28
                },
              }
            },
            center: ['50%', '50%'],
            radius: ["20%", "40%"],
            data: echartData,
          },
        ],
      };


      option && myChart.setOption(option);

    }
  }

}
</script>

<template>
  <div id="main3"></div>
</template>

<style scoped>
#main3 {
  width: 100%;
  height: 100%;
}
</style>